<script setup>

</script>

<template>
  <div class="welcome-message">
    <div class="welcome-title">
      <i class="fas fa-robot"></i>
      {{ $t("welcome-title") }}
    </div>
    <div class="welcome-subtitle">
      {{ $t("welcome-subtitle") }}
    </div>

    <div class="capabilities">
      <div class="capability">
        <i class="fas fa-lightbulb"></i>
        <h3>{{ $t("capability1-title") }}</h3>
        <p>{{ $t("capability1-text") }}</p>
      </div>
      <div class="capability">
        <i class="fas fa-file-alt"></i>
        <h3>{{ $t("capability2-title")}}</h3>
        <p>{{ $t("capability2-text") }}</p>
      </div>
      <div class="capability">
        <i class="fas fa-code"></i>
        <h3>{{ $t("capability3-title") }}</h3>
        <p>{{ $t("capability3-text") }}</p>
      </div>
      <div class="capability">
        <i class="fas fa-chart-line"></i>
        <h3>{{ $t("capability4-title") }}</h3>
        <p>{{ $t("capability4-text")}}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.welcome-message {
  max-width: 1100px;
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  background: var(--wrap-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--button-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--arrow2-color);
  margin-bottom: 30px;
  line-height: 1.6;
}

.capabilities {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.capability {
  width: 200px;
  padding: 20px;
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.capability:hover {
  transform: translateY(-5px);
}

.capability i {
  font-size: 24px;
  color: #4361ee;
  margin-bottom: 15px;
}

.capability h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--txcolor);
}

.capability p {
  font-size: 13px;
  color: var(--h4-color);
  line-height: 1.5;
}
</style>